<template>
    <div id="verify" :style="style">
        <div class="top">
            <div></div>
            <h2>北京邮电大学图论课程网站</h2>
        </div>
        <div class="middle">
            <div class="tab-bar">
                <span class="active">补全信息</span>
            </div>
            <div class="hr"></div>
        </div>
        <div class="bottom">
            <form class="verify" v-if="!error">
                <h4><span>{{name}}</span>同学您好!请补全您的账号信息</h4>
                <component is="myInput" icon="sid" type="text" :deplux.sync="nickname" placeholder="输入您的昵称"></component>
                <component is="myInput" icon="password" type="password" :deplux.sync="password"
                           placeholder="输入您的密码"></component>
                <component is="myInput" icon="password" type="password" :deplux.sync="ex_password"
                           placeholder="确认您的密码"></component>
                <button @click="complete($event)">完成</button>
            </form>
            <div class="verify" v-if="error">
                <h4>{{error}}</h4>
            </div>
        </div>
    </div>
</template>

<script type="text/babel">
    var Vue = require('../../lib/vue.common.min.js');
    let VueComponent_Input = require('../../component/input/input.vue');
    let md5 = require('../../lib/md5.min.js');

    let message = require('../../component/message/message.es6');

    module.exports = {
        props: ['width', 'bannerShow'],
        data: ()=>({
            id: '',
            secId: '',
            name: '',

            nickname: '',
            password: '',
            ex_password: '',

            error: ''
        }),
        computed: {
            style: function () {
                return {
                    'width': (this.width * 0.7) + 'px',
                    'left': (this.width * 0.3) + 'px'
                }
            }
        },
        components: {
            myInput: VueComponent_Input
        },
        methods: {
            complete: function (e) {
                e.preventDefault();

                if (this.password != this.ex_password) {
                    return message.open('两次输入的密码不一致');//两次输入的密码不一致
                }
                if (this.nickname.length == 0) {
                    return message.open('必须输入昵称'); //必须输入昵称;
                }
//
//                if (this.password == 0) {
//                    return; //必须输入密码
//                }
//
                this.$http({
                            url: '/api/user/verify/',
                            method: 'POST',
                            data: {
                                secId: this.secId,
                                nickname: this.nickname,
                                password: this.password
                            }
                        })
                        .then((res)=> {
                            let data = res.data;
                            if (data.code == 0) {
                                message.open('信息补全成功!');
                                router.replace('/courseList');
                            }

                        }, function (response) {
                            // error callback
                        });
            }
        },
        created: function () {
            this.bannerShow = true;
            this.id = this.$route.params.id;
            this.$http({
                        url: '/api/user/verify',
                        method: 'GET',
                        data: {
                            _id: this.id
                        }
                    })
                    .then((res)=> {
                        if (res.data.code != 0) {
                            this.error = res.data.msg;
                        } else {
                            let user = res.data.user;
                            this.error = '';
                            this.secId = user.secId;
                            this.name = user.name;
                        }

                    }, function (response) {
                        // error callback
                    });
        }
    }
</script>